<template>
	<view>
		<!-- 账户余额 -->
		<view class="accountBalance">
			<span>账户余额</span>
			<text> ￥1500.00</text>
		</view>
		<!-- 提现金额 -->
		<view class="withdrawalAmount">
			<text>提现金额</text>
			<input type="text">
			<text class="yuan">元</text>
			</input>
		</view>
		<!-- 真实姓名 -->
		<view class="realName">
			<text>真实姓名</text>
			<input type="text">
			</input>
		</view>
		<!-- 请选择银行 -->
		<view>
		    <picker @change="bindPickerChange" :value="index" :range="array" >
		      <view class="picker">
		        <text>请选择银行</text>
				<text class="pickerText">{{array[index]}}</text>
		      </view>
		    </picker>
		</view>
		  <!-- 银行卡号 -->
		<view class="bankCard">
		  	<text>请输入银行卡号</text>
		  	<input type="text">
		  	</input>
		</view>
		  <!-- 提示 -->
		<view class="prompt">
		  	xxx不会通过任何渠道泄露您的个人信息，请放心填写
		</view>
		  <!-- 确认提交按钮 -->
		<button class="submit" @click="ToResult">确认信息并提交</button>
		<!-- 提现记录 -->
		<view class="withdrawalRecord">
			提现记录
		</view>
		<!-- 提现记录列表 -->
		<view v-for=" item in dataList" :key="item.id"   class="recordList">
			<!-- 提现申请 -->
			<view class="subscribe">
				商家提现申请
			</view>
			<!-- 提现日期 -->
			<view class="recordTime">
				{{item.time}}
			</view>
			<!-- 提现钱数 -->
			<view class="recordMoney">
				-{{item.money}}
			</view>
			<!-- 审核状态 -->
			<view class="auditStatus">
				{{item.status}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['中国人民银行', '工商银行', '农业银行'],
				index: 0,
				dataList:[
					{id:1,money:12.00,time:"2020-02-13 09:32:12",status:"审核通过"},
					{id:2,money:16.00,time:"2020-02-13 09:32:12",status:"审核中.."},
					{id:3,money:2.00,time:"2020-02-13 09:32:12",status:"审核不通过"}
				]
			}
		},
		methods: {
			 bindPickerChange(e) {
			      this.index = e.target.value;
			      console.log('选中的值为：' + this.array[this.index]);
			    },
				ToResult(){
					uni.navigateTo({
						url:"/pages/IncomeDetails/Result"
					})
				}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	/*  商家提现申请列表样式*/
	.recordList{
		border-bottom: 1px solid rgba(187,187,187,1);
	}
	/* 提现申请样式 */
	.subscribe{
		margin-top: 10px;
		margin-left: 21px;
		height: 20px;
		line-height: 20px;
		color: rgb(16,16,16);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
	}
	/* 提现日期 */
	.recordTime{
		margin-top: 10px;
		margin-left: 21px;
		margin-bottom: 10px;
		height: 20px;
		line-height: 20px;
		color: rgb(16,16,16);
		font-size: 14px;
		text-align: left;
	}
	/* 提现钱 */
	.recordMoney{
		margin-top: -63px;
		margin-left: 300px;
		height: 25px;
		font-weight: bold;
		line-height: 25px;
		color: rgb(16,16,16);
		font-size: 18px;
		
		position: absolute;
	}
	/* 审核状态 */
	.auditStatus{
		margin-top: -32px;
		margin-left: 300px;
		height: 20px;
		line-height: 20px;
		color: rgb(16,16,16);
		font-size: 14px;
		font-weight: bold;
		position: absolute;
	}
	/* 提现记录文本样式 */
	.withdrawalRecord{
		margin: 20px 0 10px 18px;
		height: 25px;
		line-height: 25px;
		color: rgba(16,16,16,1);
		font-size: 18px;
	
		text-align: left;
		
	}
	/* 提交按钮样式 */
	.submit{
		margin-top: 20px;
		margin-bottom: 30px;
		width: 151px;
		height: 40px;
		line-height: 40px;
		border-radius: 8px;
		background-color: rgba(13,122,247,1);
		color: rgba(255,255,255,1);
		font-size: 16px;
		font-weight: bold;
		text-align: center;
	}
	/* 提示样式 */
	.prompt{
		height: 20px;
		line-height: 17px;
		color: rgb(140,139,139);
		font-size: 12px;
		text-align: center;
	}
	/* 银行卡号样式 */
	.bankCard{
		margin: 20px 0 10px 24px;
		padding-bottom: 10px;
		width: 341px;
		line-height: 20px;
		font-weight: bold;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		border-bottom: 1px solid rgba(187,187,187,1);
	}
	.bankCard input{
		margin-top: -25px;
		margin-left: 120px;
		
		width: 200px;
		height: 25px;
		line-height: 20px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: center;
		border-radius: 8px;
		border: 1px solid rgba(187,187,187,1);
	}
	/* 银行选择样式 */
	.picker{
		margin: 20px 0 10px 24px;
		padding-bottom: 10px;
		width: 341px;
		line-height: 20px;
		font-weight: bold;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		border-bottom: 1px solid rgba(187,187,187,1);
	}
	.pickerText{
		margin-top: -25px;
		margin-left: 50px;
		width: 100px;
		line-height: 20px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: center;
		border-radius: 8px;
		border: 1px solid rgba(187,187,187,1);
	}
	/* 真实姓名 */
	.realName{
		margin: 20px 0 10px 24px;
		padding-bottom: 10px;
		width: 341px;
		line-height: 20px;
		font-weight: bold;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		border-bottom: 1px solid rgba(187,187,187,1);
	}
	.realName input{
		margin-top: -25px;
		margin-left: 120px;
		
		width: 100px;
		height: 25px;
		line-height: 20px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: center;
		border-radius: 8px;
		border: 1px solid rgba(187,187,187,1);
	}
	/* 提现金额样式 */
	.withdrawalAmount{
		margin: 20px 0 10px 24px;
		padding-bottom: 10px;
		width: 341px;
		line-height: 20px;
		font-weight: bold;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		border-bottom: 1px solid rgba(187,187,187,1);
		
	}
	.withdrawalAmount input {
		margin-top: -25px;
		margin-left: 120px;
		
		width: 73px;
		height: 25px;
		line-height: 20px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: center;
		border-radius: 8px;
		border: 1px solid rgba(187,187,187,1);
	}
	.yuan{
	 margin-left: 210px;
	 margin-top: -23px;
	 position: absolute;
	}
	/* 账户余额样式 */
	.accountBalance{
		margin: 20px 0 10px 24px;
		padding-bottom: 10px;
		width: 341px;
		line-height: 20px;
		font-weight: bold;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		border-bottom: 1px solid rgba(187,187,187,1);
	}
	.accountBalance text{
		margin-left: 60px;
		height: 25px;
		line-height: 25px;
		color: rgb(247,5,5);
		font-size: 18px;
		text-align: left;
	}

</style>
